<template>
  <n-button
      style="margin-bottom: 12px"
  >
    上传文件
  </n-button>
  <n-upload
      ref="uploadRef"
      action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
      :default-upload="false"
      multiple
      @change="handleChange"
  >
    <n-button>选择文件</n-button>
  </n-upload>
</template>

<script setup>
import {ref} from "vue";
import {NButton, NUpload} from "naive-ui";

const uploadRef = ref()
function handleChange(options) {
  console.log(options)
  let url = URL.createObjectURL(options.file.file);
  let audioElement = new Audio(url);
  let duration;
  audioElement.addEventListener("loadedmetadata", function (_event) {
    duration = audioElement.duration; //时长为秒，小数，182.36
    console.log(duration)
    // this.$parent.$data.wDuration = parseInt(duration) //注意传递给接口的时长字段类型要与接口接收的字段类型一致，不然无法获取到值
  });
}
</script>

<style scoped lang="scss">

</style>